<!-- 商品详情弹窗 -->
<template>
  <div id="yz_goodsPopup" :style="{ '--color': `${themeColor}` }">
    <van-popup v-model="showgp" close-on-click-overlay="false" position="bottom" click-overlay="close" :round="roundShow" :style="{ height: isScanCode ? '95%' : '95%' }" style="background: transparent">
      <div style="height: 100%; overflow: hidden; background: transparent;">
        <template v-if="addCartBtn && showgp">
          <div class="yz-g-addCar">
            <!--  &&  -->
            <div class="yz-g-addCar_btn" v-if="goodsInfo.has_option == 1" @click.stop="ShowspecsTap">
              <span class="optionBtn_pos" v-if="optionsCheck(goodsInfo.id)">{{ optionsCheck(goodsInfo.id) }}</span>
              选择规格
            </div>
            <div class="yz-g-addCar_btn" v-else-if="!goodsInfo.has_option && !optionsCheck(goodsInfo) && !checkCartJson(goodsInfo)" @click="changeStepper('addOne', goodsInfo.id, '1')">加入购物车</div>
            <!-- <slot name="add-icon"><i class="iconfont icon-life-game-plus" @click="addCart"></i></slot> -->
          </div>
        </template>
        <div class="yz_goodsPopup-main" style="background: #f8f8f8;">
          <van-icon name="cross" class="closeIcon" @click.stop="close" />
          <!-- 顶部轮播图 -->
          <div class="yz-gp-img">
            <viewer :images="goodsInfo.thumb_url" class="section" style="position: relative">
              <c-myswipe :style="{ height: fun.getPhoneEnv() == 3 ? '375px' : '100vw' }" :pagination-visible="true" :slides="goodsInfo.thumb_url" :repeating="true" :auto="0" class="banner_pcStyle">
                <div v-if="!fun.isTextEmpty(goodsInfo.goods_video)">
                  <video
                    id="goods_vedio"
                    style="width: 100%; height: 100%; object-fit: scale-down"
                    :poster="goodsInfo.video_image"
                    :src="goodsInfo.goods_video"
                    controls
                    webkit-playsinline="true"
                    playsinline="true"
                    x5-playsinline="true"
                    x-webkit-airplay="true"
                    x5-video-ignore-metadata="true"
                    width="100%"
                    height="100%"
                  >
                    <source :src="goodsInfo.goods_video" />
                  </video>
                </div>
                <div v-if="!goodsInfo.thumb_url || goodsInfo.thumb_url == null || goodsInfo.thumb_url.length == 0">
                  <img :src="goodsInfo.thumb" width="100%" />
                </div>
                <div v-for="(ithumb, index) in goodsInfo.thumb_url" :key="index">
                  <template v-if="ithumb">
                    <img :src="ithumb" width="100%" />
                  </template>
                </div>
              </c-myswipe>
            </viewer>
          </div>
          <!-- 活动倒计时 -->
          <div class="rob-time" v-if="goodsInfo.end_time && (goodsInfo.end_time != '0' || goodsInfo.end_time != 0)">
            <div class="rt-text">截止倒计时：</div>
            <van-count-down :time="fun.getTimeDifference(goodsInfo.end_time)" class="bottom_time" format="DD天HH时mm分ss秒" @finish="timeEnd">
              <template #default="timeData">
                <em style="padding: 0.125rem; border-radius: 0.125rem">{{ timeData.days < 10 ? `0${timeData.days}` : timeData.days }} </em>天
                <em style="padding: 0.125rem; border-radius: 0.125rem">{{ timeData.hours < 10 ? `0${timeData.hours}` : timeData.hours }}</em>
                <b>:</b>
                <em style="padding: 0.125rem; border-radius: 0.125rem">{{ timeData.minutes < 10 ? `0${timeData.minutes}` : timeData.minutes }}</em>
                <b>:</b>
                <em style="padding: 0.125rem; border-radius: 0.125rem">{{ timeData.seconds < 10 ? `0${timeData.seconds}` : timeData.seconds }}</em>
              </template>
            </van-count-down>
          </div>
          <!-- 商品信息 -->
          <div class="yz-gp-goods-info">
            <div class="yz-g-price-box">
              <div class="yz-g-price" v-if="showPrice">

                {{ $i18n.t("money") }}
                <div class="big-font" v-if="goodsInfo.vip_level_status && goodsInfo.vip_level_status.status == 1">{{ goodsInfo.vip_level_status.word }}</div>
                <div class="big-font" v-else >{{
                    goodsInfo.has_option == 1 ? (goodsInfo.min_price == goodsInfo.max_price ? goodsInfo.min_price : goodsInfo.min_price + "-" + goodsInfo.max_price) : goodsInfo.price
                  }}</div>
                <font style="text-decoration: line-through; color: #999" v-if="Number(goodsInfo.market_price) > Number(goodsInfo.price) && Number(goodsInfo.market_price) > 0"
                  >{{ fun.getMarketPrice() }}:{{ goodsInfo.market_price }}</font
                >
              </div>
              <div class="yz-g-stepper" v-if="goodsInfo.has_option == 0 && checkCartJson(goodsInfo)">
                <van-stepper
                  @focus="changeStepper('foucs', checkCartJson(goodsInfo).id, checkCartJson(goodsInfo).total)"
                  @blur="changeStepper('blur', checkCartJson(goodsInfo).id, checkCartJson(goodsInfo).total)"
                  @plus="changeStepper('plus', checkCartJson(goodsInfo).id, checkCartJson(goodsInfo).total)"
                  @minus="changeStepper('minus', checkCartJson(goodsInfo).id, checkCartJson(goodsInfo).total)"
                  :style="{ '--color': `${themeColor}` }"
                  v-model="checkCartJson(goodsInfo).total"
                  theme="round"
                  button-size="20"
                  min="0"
                />
              </div>
            </div>

            <div class="yz-g-title">{{ goodsInfo.title }}</div>
            <div class="yz-g-other">
              <div class="other-info">库存：{{ goodsInfo.stock }}</div>
              <div class="other-info">销量：{{ parseInt(goodsInfo.show_sales) + parseInt(goodsInfo.virtual_sales) }}</div>
            </div>
          </div>
          <div style="height: 10px; background: #f8f8f8" v-if="!this.fun.isTextEmpty(goodsInfo.has_one_brand)"></div>
          <!-- 会员 -->
          <div class="goods-member-level" v-if="openVip == '1'">
            <div class="container-style2" v-if="goodsInfo.member_discount && goodsInfo.member_discount.all_level_price">
              <!-- 商品样式插件 good-style 样式二 -->
              <div class="flex-a-c level-list-container">
                <div class="item flex-a-c" v-for="item in goodsInfo.member_discount.all_level_price" :key="item.level_id">
                  <div>￥{{ item.price }}</div>
                  <div class="bubble flex-a-c" :class="{ 'is-select-color': item.is_select }">{{ item.level_name }}</div>
                </div>
              </div>
              <div class="flex updata-level">
                <div class="updata-level-child-1" v-if="lastMemLevelInfo" :style="{ background: goodsInfo.member_discount.can_upgrade ? '#333' : '#999' }">
                  升级为【{{ lastMemLevelInfo.level_name || activeMemLevelInfo.level_name }}】会员立享商品低价优惠
                </div>
                <div class="updata-level-child-2 flex-a-c" v-if="goodsInfo.member_discount && goodsInfo.member_discount.can_upgrade && goodsInfo.member_discount.display_page == '1'">
                  <span @click.stop="gotoMemberGradeList(goodsInfo.member_discount.display_page)">去升级</span>
                </div>
              </div>
            </div>
            <div class="container" v-else @click="gotoMemberGradeList(goodsInfo.member_discount.display_page)">
              <i class="iconfont icon-huiyuanguanli-copy"></i>
              <div class="level-name">会员</div>
              <div class="level-list">
                <div v-if="goodsInfo.member_discount && goodsInfo.member_discount.discount_value" class="level-item level-item-style-1">
                  {{ goodsInfo.member_discount.level_name }}专享价{{ $i18n.t("money") }}
                  {{ goodsInfo.vip_level_status && goodsInfo.vip_level_status.status == 1 ? "暂无权限" : goodsInfo.member_discount.discount_value }}
                  <span v-if="isRent">/天</span>
                </div>
                <div v-if="goodsInfo.member_discount && goodsInfo.member_discount.next_level_price != goodsInfo.member_discount.discount_value" class="level-item level-item-style-2">
                  加入{{ goodsInfo.member_discount.next_level_name }}专享价{{ $i18n.t("money") }}
                  {{ goodsInfo.vip_level_status && goodsInfo.vip_level_status.status == 1 ? "暂无权限" : goodsInfo.member_discount.next_level_price }}
                  <span v-if="isRent">/天</span>
                </div>
              </div>
              <template v-if="goodsInfo.member_discount && goodsInfo.member_discount.display_page == '1'">
                <div class="level-button">立即开通</div>
                <i class="iconfont icon-advertise-next"></i>
              </template>
            </div>
          </div>
          <selfParameterServicetag :goods_info="_goodsInfo" :loading="show1" />

          <!-- 供应商、品牌信息 -->
          <div class="yz-gp-brand" v-if="!this.fun.isTextEmpty(goodsInfo.has_one_brand)">
            <img :src="goodsInfo.has_one_brand.logo" alt="" class="logo_img" />
            {{ goodsInfo.has_one_brand.name }}
          </div>
          <!--群活码-->
          <div class="group-code" v-if="goods_plugin.group_code && goods_plugin.group_code.goods_entrance == 1">
            <div class="group-code-face" v-if="goods_plugin.group_code.code_logo">
              <img :src="goods_plugin.group_code.code_logo" alt="" />
            </div>
            <div class="group-code-content">
              <div class="group-code-name">{{ goods_plugin.group_code.code_title }}邀请您添加专属福利群！</div>
              <div class="group-code-desc">{{ goods_plugin.group_code.citation_copy }}</div>
            </div>
            <div class="group-code-button" @click="toGroupCode">去加群</div>
          </div>
          <div class="optionsBox" v-if="isScanCode">
            <div class="shopinfo noVantRadio" v-if="!fun.isTextEmpty(goodsInfo.has_many_specs)">
              <dl v-for="(specs, i) in goodsInfo.has_many_specs" :key="i">
                <dt>{{ specs.title }}</dt>
                <dd>
                  <van-radio-group v-model="specs.description" checked-color="#f15353" @change="selectSpecs">
                    <van-radio
                      :class="{ vantRadioshow: specs.description == specitem }"
                      :style="{
                        borderColor: specs.description == specitem ? `${themeColor}` : 'transparent',
                        backgroundColor: '#f6f6f6',
                        color: specs.description != specitem ? '#999999' : `${themeColor}!important`
                      }"
                      :disabled="specitem.c"
                      v-for="(specitem, i) in specs.specitem"
                      :name="specitem"
                      :key="i"
                      :checked-color="`${themeColor}`"
                    >
                      {{ specitem.title }}
                    </van-radio>
                  </van-radio-group>
                </dd>
              </dl>
            </div>

            <!-- 单规格 -->
            <div class="single">
              <div class="left">
                购买数量
                <span class="txt">(库存{{ popStock }}个)</span>
              </div>
              <div class="right">
                <div class="editCount">
                  <div class="cut" @click.stop="reduceGoods">-</div>
                  <van-field v-model="goodsCount" type="digit" input-align="center" />
                  <div class="add" @click.stop="addGoods">+</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 精选口碑 评论组件 -->
          <c-comment
            class="section"
            :commentInfo="commentLimit"
            :num="totalComment"
            :rate="favorable_rate"
            :is_show_default_praise="is_show_default_praise"
            :goods_id="this.$route.params.id"
            v-on:RouterTo="FromTo"
            v-if="goodsInfo.is_order_detail_comment_show == 1"
          ></c-comment>
          <div style="height: 10px; background: #f8f8f8"></div>
          <!-- 商品描述 -->
          <div class="yz-g-detail">
            <div class="yz-g-d-title">— 商品详情 —</div>
            <div class="yz-content" v-html="goodsInfo.content"></div>
          </div>
          <div style="height: 3rem; background: #f8f8f8" v-if="isScanCode"></div>
        </div>
        <div class="bottomCartBtn set-pc-style" v-if="isScanCode">
          <div class="left" @click="storeAddCart">加入购物车</div>
          <div class="right" @click="closeCart">结算购物车</div>
        </div>
      </div>
    </van-popup>
    <manySpecs @updateCart="updateChild" :themeColor="themeColor" :store_id="store_id" @close="manySpecsClose" v-model="Showspecs" :goodsInfo="goodsInfo" :carts="cardata" v-if="cardata"></manySpecs>
    <posCart v-if="showgp"
    :cartsNum="cartsNum" :cartsTotal="cartsTotal" :themeColor="themeColor" 
    :cardata="cardata" :showGood="showgp" :store_id="store_id"></posCart>
  </div>
</template>

<script>
import cMyswipe from "components/myswipe";
import selfParameterServicetag from "components/goods/children/selfParameterServicetag"; //商品挂件列表
import cComment from "components/goods/children/comment"; // 评论
import manySpecs from "./manySpecs.vue";
import posCart from "./posCart.vue";

export default {
  model: {
    prop: "showgp",
    event: "onEmit"
  },
  props: {
    showgp: {
      type: Boolean,
      required: false
    },
    _goodsInfo: {
      type: Object,
      default: () => ({})
    },
    goodsInfo: {
      type: Object,
      default: () => ({})
    },
    //主题色
    themeColor: {
      type: String,
      default: "#f14e4e"
    },
    //显示加入按钮
    addCartBtn: {
      type: Boolean,
      default: true
    },
    isScanCode: {
      type: Boolean,
      default: false
    },
    showPrice: {
      type: Boolean,
      default: true
    },
    roundShow: {
      type: Boolean,
      default: false
    },
    goodsCartsTotal: {
      type: null
    },
    cardata: {
      type: null
    },
    store_id: {
      type: String,
      default: ""
    },
    cartsNum: {
      type: null
    },
    cartsTotal: {
      type: null
    },
    tag:{
      type:String,
      default:''
    }
  },
  data() {
    return {
      valueNUm: "1",
      activitySwitch: false,
      show1: false,
      openVip: 2,
      goods_plugin: [],
      commentLimit: [], //评论组件，设置最新5条评论
      totalComment: "", //总评论数
      is_show_default_praise: 0, // 是否显示 默认好评已隐藏
      favorable_rate: "100%", //好评率
      timer: null,
      Showspecs: false,
      goodsCartsOld:''
    };
  },
  components: { cMyswipe, selfParameterServicetag, cComment, manySpecs, posCart }, //yzSpecs,
  computed: {
    optionsCheck(id) {
      return function(id) {
        if (this.goodsCartsTotal[id]) {
          return this.goodsCartsTotal[id].total;
        }
      };
    },
    checkCartJson(item) {
      return function(item) {
        let arrayA = [];
        if (this.cardata) {
          arrayA = this.cardata;
        }
        let arr = [];
        if (arrayA.length == 0) return false;
        for (let i = 0; i < arrayA.length; i++) {
          if (arrayA[i].goods_id == item.id) {
            arr = arrayA[i];
            break;
          }
        }
        if (arr.length <= 0) {
          return false;
        } else {
          return arr;
        }
      };
    }
  },
  watch: {
    showgp: function(newV, oldV) {
      if (newV) {
        this.init();
      }
    },
    goodsInfo: function(nval, oval) {
      if (nval) {
        if (this.goodsInfo.member_discount && this.goodsInfo.member_discount.discount) {
          if (this.fun.isTextEmpty(this.goodsInfo.member_discount.discount)) {
            this.openVip = 1;
          } else {
            this.openVip = this.goodsInfo.member_discount.discount;
          }
        }
        this.goods_plugin = this._goodsInfo.plugin;
        this.getData(nval);
      }
    },
    _goodsInfo:function(nval,oval){
      this.show1 = true;
    }
  },
  mounted() {
    this.show1 = true;
  },
  methods: {
    updateChild(){
      this.$emit('updateChild')
    },
    close() {
      this.$emit("onEmit", false);
    },
    addCart() {
      this.$emit("showgoodspecs", true);
    },
    init() {
      if (!this.isScanCode) return;
      this.popupSpecs = false;
      this.initPopViewisScanCode();
    },
    closeCart() {
      console.log("结算购物车");
      this.$emit("closeCart");
    },
    storeAddCart() {
      console.log("加入购物车门店自助买单");
      this.$emit("addCart", { goodsInfo: this.goodsInfo, optionsId: this.optionsId, goodsCount: this.goodsCount });
    },
    closeCart() {
      // 到预下单页
      this.$emit("toOrderChild");
    },
    gotoMemberGradeList(o) {
      if (o == "1") {
        this.$router.push(this.fun.getUrl("MemberGradeList", {}));
      }
    },
    changeStepper(name, id, total) {
      // if (this.timer) clearTimeout(this.timer); //防抖
      // this.timer = setTimeout(() => {
      //   this.$emit(name, { id, total, name });
      // }, 500);
      console.log(name,id,total)
      if(name == 'plus'){
        this.updateCartRequest(id,'1')
      }else if(name == 'minus'){
        this.updateCartRequest(id,'-1')
      }else if (name == 'addOne'){
        this.addCart({id},"");
      }else if (name == 'foucs'){
        this.goodsCartsOld = total;
      }else if(name == 'blur'){
        if(total === 0){
          this.delItemByCart({id})
        }
        if (total == "") {
          return
        } else if (total < this.goodsCartsOld) {
          let lowerNum = `-${this.goodsCartsOld - total}`;
          this.updateCartRequest(id, lowerNum);
        } else if (total > this.goodsCartsOld) {
          let lowerNum = total - this.goodsCartsOld;
          this.updateCartRequest(id, lowerNum);
        } else if (total == this.goodsCartsOld) {
          return;
        }
      }
    },
    getData(data) {
      if (data.comment) {
        this.commentLimit = data.comment.data;
        this.totalComment = data.comment.total_summary ? data.comment.total_summary : 0;
      } else if (data.get_comment) {
        this.commentLimit = data.get_comment.data;
        this.totalComment = data.get_comment.total_summary ? data.get_comment.total_summary : 0;
        this.is_show_default_praise = data.get_comment.is_show_good_reputation_text;
      }
    },
    // addFirst() {
    //   this.changeStepper("plus", this.goodsInfo.id);
    // },
    // updateCart(json) {
    //   if (json.key == "-1") {
    //     this.changeStepper("minus", json.id);
    //   } else if (json.key == "1") {
    //     this.changeStepper("plus", json.id);
    //   } else if (json.key == "add") {
    //     let obj = {
    //       id: json.id,
    //       option_id: json.optionsId,
    //       total: 1
    //     };
    //     this.$emit("addOneSpecs", obj);
    //   } else if(json.key == 'blur') {
    //     this.changeStepper('childBlur', json.id , json.lowerNum )
    //   } else if(json.key == 'del'){
    //     this.changeStepper('delItemByCart',json.id)
    //   }
    // },
    manySpecsClose() {
      this.Showspecs = false;
    },
    ShowspecsTap() {
      this.Showspecs = true;
    },
    //  +  -操作
    updateCartRequest(id, num) {
      $http
        .get(
          "plugin.store-cashier.frontend.shoppingCart.member-cart.updateNum",
          {
            id: id,
            num: num,
            store_id: this.store_id
          },
          "加载中"
        )
        .then(
          response => {
            this.cartPostClick = true;
            if (response.result == 1) {
              this.updateChild();
            } else {
              this.$dialog.alert({ message: response.msg });
            }
          },
          response => {}
        );
    },
    // 首次进入购物车
    addCart(goods, tag, _i) {
      console.log(goods, tag, _i)
      let id = "";
      if (tag === "cart") {
        id = goods.goods_id;
      } else {
        id = goods.id;
      }
      $http
        .get(
          "plugin.store-cashier.frontend.shoppingCart.member-cart.store",
          {
            goods_id: id,
            total: 1,
            store_id: this.store_id,
            option_id: goods.option_id || 0
          },
          "添加中"
        )
        .then(
          response => {
            this.cartPostClick = true;
            if (response.result === 1) {
              console.log("manySpecs请求更新购物车");
              this.updateChild();
              // this.getCart(goods);
            } else {
              this.$dialog.alert({ message: response.msg });
            }
          },
          response => {
            //alert('网络错误，请稍后再试！')
          }
        );
    },
    // 移除购物车
    delItemByCart(cart_id) {
      $http
        .get("plugin.store-cashier.frontend.shoppingCart.member-cart.destroy", {
          store_id: this.store_id,
          ids: cart_id.id
        },"")
        .then(
          response => {
            if (response.result == 1) {
              this.updateChild();
            } else {
              this.$dialog.alert({ message: response.msg });
            }
          },
          response => {
            //alert('网络错误，请稍后再试！')
          }
        );
    },
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
#yz_goodsPopup {
  height: 100%;
  overflow-y: scroll;
  .optionsBox {
    padding: 0 0.75rem;
    box-sizing: border-box;
    .single {
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        align-items: center;
        font-size: 1rem;
        .txt {
          font-size: 0.75rem;
          color: #999999;
          margin-left: 0.5rem;
        }
      }
      .right {
        .editCount {
          display: flex;
          .cut,
          .add {
            width: 1.5rem;
            height: 1.5rem;
            border: 1px solid #cccccc;
            border-radius: 50%;
            color: #000000;
            font-size: 1.3rem;
            box-sizing: border-box;
            overflow: hidden;
            line-height: 1.2rem;
          }
          .van-cell {
            padding: 0;
            background: transparent;
            width: 2.22rem;
            text-align: center;
          }
          .van-field__control {
            text-align: center;
          }
        }
      }
    }
  }
  .bottomCartBtn {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    padding: 0.25rem 0.75rem;
    display: flex;
    align-items: center;
    .left {
      flex-shrink: 0;
      height: 2.56rem;
      border: 1px solid var(--color);
      border-radius: 1.28rem;
      font-size: 0.88rem;
      color: var(--color);
      padding: 0.66rem 0.88rem;
      box-sizing: border-box;
      margin-right: 0.75rem;
    }
    .right {
      flex: 1;
      height: 2.56rem;
      background: var(--color);
      border-radius: 1.28rem;
      font-size: 0.88rem;
      line-height: 2.56rem;
      color: #ffffff;
    }
  }
  .van-popup {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
    &::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }
  }

  ::v-deep .van-popup__close-icon {
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 0.25rem;
    right: 0.75rem;
    top: 5rem;
    // position: fixed;
    // top: 22%;
  }

  .yz_goodsPopup-main {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100%;
    padding-bottom: 7rem;
    border-radius: 1.5rem 1.5rem 0 0;
    position: relative;
  }
  .closeIcon {
    position: absolute;
    right: 0.75rem;
    top: 1rem;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 0.25rem;
    border-radius: 50%;
    z-index: 19;
  }

  .banner_pcStyle {
    font-size: 0;
  }

  .rob-time {
    height: 2.625rem;
    line-height: 2.625rem;
    color: #fff;
    background: var(--color);
    display: flex;
    justify-content: space-between;
    padding: 0 0.875rem;
    align-items: center;

    .rt-text {
      font-size: 1rem;
    }

    .bottom_time {
      em {
        background: #fff;
        color: #000;
      }
    }
  }

  .van-count-down {
    color: #fff;
  }

  .yz-gp-goods-info {
    padding: 0.5rem 0.875rem;
    display: flex;
    flex-direction: column;
    .yz-g-price-box {
      display: flex;
      justify-content: space-between;
      .van-stepper {
        ::v-deep .van-stepper__minus {
          color: rebeccapurple !important;
          border-color: var(--color) !important;
        }

        ::v-deep .van-stepper__plus {
          background-color: var(--color) !important;
        }
      }
    }
    .yz-g-price {
      color: #f15353;
      font-size: 0.75rem;
      display: flex;
      align-items: baseline;
      padding-bottom: 0.375rem;

      .big-font {
        font-size: 1.25rem;
        font-weight: bold;
        color: #f15353;
        margin: 0 0.5rem 0 0.125rem;
      }
    }

    .yz-g-title {
      text-align: left;
      font-size: 1rem;
      line-height: 1.25rem;
      color: #333;
      margin-bottom: 0.375rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .yz-g-other {
      display: flex;
      justify-content: space-between;
      color: #6e6e79;
      font-size: 0.81rem;
      .other-info {
        margin-right: 0.875rem;
      }
    }
  }

  .yz-gp-brand {
    height: 3.875rem;
    line-height: 3.875rem;
    display: flex;
    align-items: center;
    padding: 0 0.875rem;
    font-size: 1rem;
    color: #333;

    .logo_img {
      width: 1.875rem;
      height: 1.875rem;
      border-radius: 100%;
      overflow: hidden;
      margin: 0 0.75rem 0 0;
    }
  }

  .yz-g-detail {
    .yz-g-d-title {
      height: 2.875rem;
      line-height: 2.875rem;
      color: #999;
    }

    .yz-content {
      ::v-deep img {
        max-width: 100%;
        vertical-align: bottom; //解决图片有默认的下边距问题
      }
    }
  }
}
.shopinfo {
  text-align: left;
  margin: 0 0 1.5rem 0;
  max-height: 50vh;
  overflow: scroll;

  dl dt {
    margin-bottom: 0.3125rem;
    color: #000;
    font-size: 1rem;
  }

  dl dd {
    margin-bottom: 0.3125rem;
  }
}
.noVantRadio {
  .van-radio-group {
    display: flex;
    flex-wrap: wrap;

    .van-radio {
      margin-right: 0.75rem;
      margin-bottom: 0.75rem;
      padding: 0.5rem 1.22rem;
      background: #fff;
      border: 1px solid #fb4a4a;
      text-align: center;
      box-sizing: border-box;
      border-radius: 0.13rem;
      color: #fb4a4a;
      min-width: 4rem;
    }

    ::v-deep .vantRadioshow {
      background-color: rgb(241, 83, 83);
      border-color: rgb(241, 83, 83);
      // box-shadow: rgb(241, 83, 83) -1px 0px 0px 0px;
      .van-radio__label {
        color: var(--color) !important;
      }
    }

    ::v-deep .van-radio__label {
      color: inherit;
    }
  }
}
// 会员
.goods-member-level {
  padding: 0.6rem 0.875rem 0 0.875rem;

  .container {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.3rem 0.625rem;
    color: #fff;
    background-color: #493f41;
    border-radius: 0.313rem;

    .icon-huiyuanguanli-copy {
      font-size: 1.1rem;
    }

    .level-name {
      margin-left: 0.344rem;
      font-size: 13px;
      font-weight: bold;
    }

    .level-list {
      flex: 1;
      margin: 0 0.5rem 0 0.8rem;
      text-align: left;

      .level-item {
        font-size: 13px;
        font-weight: bold;

        &.level-item-style-1 {
          color: #e4c5a5;
        }

        &.level-item-style-2 {
          color: #cca86e;
        }
      }
    }

    .level-button {
      line-height: 1.1;
      font-size: 13px;
      font-weight: bold;
    }

    .icon-advertise-next {
      margin-left: 0.113rem;
    }
  }

  .container-style2 {
    .level-list-container {
      overflow: auto;
    }

    .level-list-container::-webkit-scrollbar {
      display: none;
    }

    .item {
      padding-right: 8px;
      height: 1rem;
      flex-shrink: 0;

      .bubble {
        padding: 0 6px;
        margin: 0 0 0 4px;
        height: 1rem;
        line-height: 1rem;
        font-size: 10px;
        color: #ffefce;
        border-radius: 0 6px 6px 6px;
        flex-shrink: 0;
        background: #333;
      }

      .is-select-color {
        color: #fff;
        background: #999;
      }
    }

    .updata-level {
      margin: 8px 0;
      border-radius: 40px;
      width: 100%;
      color: #fff;
      overflow: hidden;
      font-size: 12px;
      font-weight: bold;

      .updata-level-child-1 {
        padding: 8px 18px;
        flex: 1;
        text-align: left;
        background: #333;
      }

      .updata-level-child-2 {
        width: 4.625rem;
        color: #333;
        justify-content: center;
        text-align: center;
        background: linear-gradient(90deg, #fedeaf 0%, #ecbc81 100%);
      }
    }
  }
}
// 活动
.goods-additional-info {
  text-align: left;
  padding: 0.5rem 0.875rem;

  .goods-additional-text {
    width: 3.156rem;
    font-size: 0.813rem;
    color: #9c9c9c;
  }

  // .goods-additional-text_diy {
  //   width: 4.3rem;
  //   overflow: hidden;
  //   text-overflow: ellipsis;
  //   white-space: nowrap;
  // }
  .goods-additional-text_diy {
    color: #565656;
    flex: 1;
  }
  .text-right {
    text-align: right;
  }

  .goods-additional-content {
    flex: 1;
    font-size: 13px;
    font-weight: bold;
    color: #565656;
  }

  .goods-additional-button {
    font-size: 12px;
    margin-left: 0.5rem;
    font-weight: bold;
    color: #f14e4e;
  }

  .iconfont-button {
    color: #f14e4e;
  }

  .collect-order {
    display: flex;
    margin: 0.8rem 0;
  }

  .selfbuy-discount {
    display: flex;
    margin: 0.8rem 0;

    .selfbuy-discount-items {
      flex: 1;
      overflow: hidden;

      .goods-additional-content:not(:first-child) {
        margin-top: 0.8rem;
      }
    }
  }

  .service-box {
    padding: 0 0.75rem 0.5rem 0;
    text-align: left;
    color: #5a5a5a;
    font-size: 13px;
    background: #fff;
  }

  .goods-activity {
    display: flex;
    margin: 0.8rem 0;

    .goods-activity-items {
      flex: 1;
      overflow: hidden;

      .goods-activity-item:not(:first-child) {
        margin-top: 0.75rem;
      }

      .goods-activity-item {
        display: flex;
        align-items: center;

        .goods-activity-item-label {
          padding: 2px 8px;
          font-size: 0.625rem;
          color: #f14e4e;
          background: rgba(241, 78, 78, 0.1);
          border-radius: 15px;
        }

        .goods-additional-content {
          margin-left: 0.406rem;
        }
      }
    }
  }
}

.yz-g-addCar {
  display: flex;
  flex-direction: row-reverse;
  margin: 0.63rem 0.75rem;
  .yz-g-addCar_btn {
    padding: 0.78rem 0.94rem;
    box-sizing: border-box;
    background: var(--color);
    border-radius: 1.88rem;
    font-size: 0.94rem;
    font-weight: 500;
    color: #ffffff;
    position: relative;
    .optionBtn_pos {
      position: absolute;
      right: 0.1rem;
      top: -0.3rem;
      min-width: 1.13rem;
      height: 1.13rem;
      border-radius: 100%;
      background: #fca624;
      text-align: center;
      line-height: 1rem;
    }
  }
  i {
    background: var(--color);
    color: #fff;
    width: 1.5rem;
    height: 1.5rem;
    text-align: center;
    line-height: 1.5rem;
    border-radius: 50%;
    display: block;
  }
}
</style>
